<template>
  <div class="page-editTemplate">
    <div class="nameInput">
      <div class="label"> <span class="require">*</span> 模板名称</div>
      <el-input v-model="templateName" placeholder="请输入模板名称"></el-input>
    </div>
    <section class="section" ref="section">
      <div class="left model">
        <div class="bar1">
          <div class="title"></div>
          <!-- <el-upload :show-file-list="false" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
            <el-button size="small" type="primary">word导入</el-button>
          </el-upload> -->
        </div>
        <div id="editor"></div>
      </div>
      <div class="right model">
        <div class="bar1">
          <div class="title">信息引用</div>
        </div>
        <div class="info">
          <div class="box" v-for="(item, index) in infoList" :key="index">
            <div class="bar">
              <div class="line"></div>{{item.modulename}}
            </div>
            <div class="btn" @click="onInsert(i.columnname)" v-for="(i, idx) in item.columns" :key="idx">{{i.columnname}}</div>
          </div>
        </div>
      </div>
    </section>
    <footer class="footer">
      <div class="box">
        <el-button @click="$router.back()">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </footer>
  </div>
</template>
<script>
import E from "wangeditor";


export default {
  data() {
    return {
      templateContent: '',
      templateName: '',
      infoList: [],
      editorHeight: 0
    };
  },

  methods: {
    async save() {
      if (!this.templateName) return this.$message({ type: 'warning', message: '请输入模板名称' });
      if (this.$route.query.templateId) {
        await this.$api.optionsManage.EditEmployeeLeaveTemplate(this.$route.query, { templateContent: this.templateContent, templateName: this.templateName });
        this.$router.back();
        return;
      }
      await this.$api.optionsManage.AddEmployeeLeaveTemplate({ templateContent: this.templateContent, templateName: this.templateName });
      this.$router.back();
    },
    onInsert(name) { // 光标位置插入
      this.editor.cmd.do('insertHTML', '<span style="color:#5eb2eb;">#' + `${name}` + '#</span>');
    },
    onChange(newHtml) {
      this.templateContent = newHtml;
    },
    async customUploadImg(resultFiles, insertImgFn) { // 自定义上传文件
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      const file = resultFiles[0];
      const form = new FormData();
      form.append('formFile', file);
      const fileTypeName = file.name.split('.') ? file.name.split('.')[file.name.split('.').length - 1] : 'text';
      const { data: { data } } = await this.$api.optionsManage.uploadOssFile(form, { fileTypeName });
      // 上传图片，返回结果，将图片插入到编辑器中
      insertImgFn(data.fileUrl);
    },
    initEditor() { // 初始化编辑器
      this.editor.destroy();
      this.editor = new E("#editor");
      this.editor.config.height = this.editorHeight;
      this.editor.config.zIndex = 500;
      this.editor.config.onchange = this.onChange;
      this.editor.config.onchangeTimeout = 5000;
      this.editor.config.customUploadImg = this.customUploadImg;
      this.editor.create();
    },
    getVhHeight() {
      const width = this.$refs.section?.offsetWidth;
      this.editorHeight = this.$refs.section?.offsetHeight - (width < 1500 ? 146 : 104); //140 98
      this.initEditor();
    },
    async getAllEnableModuleField() {
      const { data } = await this.$api.optionsManage.GetAllEnableModuleField();
      this.infoList = data.data;
      if (!this.$route.query.templateId) return;
      const { data: { data: detail } } = await this.$api.optionsManage.GetEmployeeLeaveTemplate(this.$route.query);
      this.editor.txt.html(detail.templateContent), this.templateName = detail.templateName;
    },
  },

  async mounted() {
    this.getAllEnableModuleField();
    await this.$nextTick();
    this.editor = new E("#editor");
    this.getVhHeight();
    window.addEventListener("resize", () => {
      this.getVhHeight();
    });
  }

};
</script>
<style lang="less" scoped>
.page-editTemplate {
  display: flex;
  flex-direction: column;
  .nameInput {
    width: 300px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 20px;
    .label {
      width: 100px;
      font-size: 15px;
      .require {
        color: red;
      }
    }
  }

  .section {
    flex: 1;
    display: flex;
    overflow: hidden;
    .model {
      padding: 10px 20px;
      .bar1 {
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        padding: 0 20px;
        border: 1px solid #ccc;
        border-bottom: none;
        background: #f5f8fd;
        display: flex;
        align-content: center;
        justify-content: space-between;
      }
    }
    .left {
      flex: 5;
    }
    .right {
      flex: 2;
      overflow: auto;
      display: flex;
      flex-direction: column;
      .info {
        border: 1px solid #ccc;
        overflow: auto;
        flex: 1;
        padding: 20px;
        .box {
          margin-bottom: 30px;
          .bar {
            display: flex;
            align-items: center;
            font-size: 16px;
            .line {
              width: 3px;
              height: 16px;
              border-radius: 4px;
              background: #5c91fb;
              margin-right: 7px;
            }
          }
          .btn {
            cursor: pointer;
            padding: 6px 10px;
            border: 1px solid #5c91fb;
            border-radius: 3px;
            color: #5c91fb;
            font-size: 16px;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
            margin-top: 15px;
            &:hover {
              transition: 0.3s all;
              background: #5c91fb;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-top: 1px solid #ccc;
  }
}
:deep( .el-tabs__header) {
  margin: 0;
}
:deep( .el-tabs__nav-scroll) {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
